<template>
  <transition
    name="custom-classes-transition">
    <div class="dialog-ctrl" v-show="visible">
      <img :src="require('@/assets/logging01.gif')" alt="" class="dialog-content">
    </div>
  </transition>
</template>

<script>
  export default {
    name: "loading",
    props:{
      visible: {
        type: Boolean,
        default: false
      },
    },
  }
</script>

<style scoped>
  .dialog-ctrl{
    position: fixed;
    width: 100%;
    height:  100%;
    background-color: rgba(46,56,70,0.2);
    color: #fff;
    top: 0px;
    border-radius: 4px;
    z-index: 999;
  }
  .dialog-ctrl .dialog-content{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
